
import { anim, play, combine } from '@feidao/animation';
import { ICombineAnimation } from '@feidao/animation/types';
import init from '@feidao/web/framework/browser/d/component';
import { id, spaceid, systemid, refsystemid } from './config';

let anim1: ICombineAnimation;
let anim2: ICombineAnimation;
const actions = {
	init() {
		const left = document.getElementById('left');
		const left_open = document.getElementById('left_open');
		const left_close = document.getElementById('left_close');
		const right = document.getElementById("right");
		const narrow = 55;
		const wide = 165;
		const a1 = anim(left, {
		}, {
				width: {
					start: wide,
					end: narrow
				}
			});

		const a7 = anim(right, {
		}, {
				'margin-left': {
					start: 0,
					end: -110
				}
			});
		anim1 = combine([a1, a7], {
			play() {
				left_open.style.display = 'none';
				left_close.style.display = 'block';
			}
		});


		const a3 = anim(left, {
		}, {
				width: {
					start: narrow,
					end: wide
				}
			}, {
				end() {
					left_open.style.display = 'block';
					left_close.style.display = 'none';
				}
			});


		const a8 = anim(right, {
		}, {
				'margin-left': {
					start: -110,
					end: 0
				}
			});
		anim2 = combine([a3, a8], {
		});
	},
	close_animation() {
		play(anim1);
	},
	open_animation() {
		play(anim2);
	}
};


const s = {
	"fd-events-init": 'init',
	'open_animation': 'open_animation',
	'close_animation': 'close_animation'
};

export default function main(url: string, query: any) {
	return init(id, s, actions, url, query, { spaceid, systemid, refsystemid });
}
